<script setup>
const props = defineProps(["item","min"]);
// console.log(props.item);

// const addSubation = (flag, index, Iindex) => {
//   // console.log(flag,index,Iindex);
//   if (flag > 0) {
//     props.GoodsItem[index].list[Iindex].number += 1;
//   } else {
//     if (props.GoodsItem[index].list[Iindex].number >= 1) {
//       props.GoodsItem[index].list[Iindex].number -= 1;
//     }
//   }
// };

// console.log(props.min);
const addReduce = ( item, flag) => {
  // console.log(Iindex,index,flag)
  if (flag > 0) {
    item.number += 1;
  } else {
    if (item.number >= 1) {
      item.number -= 1;
    }
  }
};
</script>

<template>
  <div>
    <!-- <div class="product">
      <div class="product_img">
        <img src="http://www.dell-lee.com/imgs/vue3/tomato.png" alt="" />
      </div>
      <div class="product_content">
        <div class="product_content_title">番茄 250g / 份</div>
        <slot></slot>
        <div class="product_content_price">
          ￥3.6 <span class="product_content_old_price">￥3.6</span>
        </div>
      </div>
      <div class="product_number">
        <span class="product_number_minus">-</span>
        1
        <span class="product_number_plus">+</span>
      </div>
    </div> -->

    <div class="product">
    <div :class="[min==='min' ? 'product_img--min' : 'product_img']">
      <!-- <div class="product_img--min"> -->
      <img
        :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`"
        alt=""
      />
    </div>
    <div class="product_content">
      <div class="product_content_title">{{ item.title }}</div>
      <!-- <div class="product_content_sales">月售 {{ props.product.sales }} 件</div> -->
      <slot></slot>
      <div class="product_content_price">
        {{ item.price }}
        <span class="product_content_old_price">{{ item.oldPrice }}</span>
      </div>
    </div>
    <div class="product_number">
      <span class="product_number_minus" @click="addReduce(item,-1)"
        >-</span
      >
      {{ item.number }}
      <span class="product_number_plus" @click="addReduce(item,1)"
        >+</span
      >
    </div>
    </div>
    <!-- <div v-for="(item,index) in GoodsItem" :key="item.id">
      <div class="product" v-for="(Iitem, Iindex) in item.list" :key="Iindex">
          <div class="product_img">
            <img :src="`http://www.dell-lee.com/imgs/vue3/${Iitem.imgName}.png`" alt="" />
          </div>
          <div class="product_content">
            <div class="product_content_title">{{ Iitem.title }}</div>
            <slot></slot>
            <div class="product_content_price">
              {{Iitem.price}}
              <span class="product_content_old_price"
                >{{ Iitem.oldPrice }}</span
              >
            </div>
          </div>
          <div class="product_number">
            <span class="product_number_minus" @click="addSubation(-1,index,Iindex)">-</span>
            {{Iitem.number}}
            <span class="product_number_plus" @click="addSubation(1,index,Iindex)">+</span>
          </div>
      </div>
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
@import "@/style/mixins.scss";
.product {
  padding: 0.18rem;
  box-sizing: border-box;
  display: flex;
  position: relative;
  border-bottom: 0.01rem solid $content-bgColor;

  &_img {
    width: 0.68rem;
    margin-right: 0.18rem;

    img {
      width: 0.68rem;
      height: 0.68rem;
    }
  }
  &_img--min {
    width: 0.48rem;
    margin-right: 0.18rem;

    img {
      width: 0.48rem;
      height: 0.48rem;
    }
  }
  &_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &_title {
      font-size: 0.14rem;
      font-weight: bold;
      color: $content_fontcolor;
      @include ellipse;
    }
    &_price {
      color: $hightlight-fontColor;
    }
    &_old_price {
      color: $light-fontColor;
      text-decoration: line-through;
    }
  }
  &_number {
    position: absolute;
    right: 0.18rem;
    bottom: 0.18rem;

    &_minus,
    &_plus {
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      border-radius: 50%;
      font-size: 0.16rem;
      text-align: center;
    }
    &_minus {
      border: 0.01rem solid $medium-fontColor;
      color: $medium-fontColor;
      margin-right: 0.08rem;
    }
    &_plus {
      background-color: $btn-bgColor;
      color: $bgColor;
      margin-left: 0.08rem;
    }
  }
}
</style>